import React, { useState, useMemo } from 'react'

const Child = React.memo((props) => {

    console.log('Child 组件被执行了');

    return (<>
        <h1>Child --{props.info.name} -{props.info.age} </h1>
    </>)
})

export default function App() {
    const [count, setCount] = useState(100)

    const [name] = useState('小王')
    const [age] = useState(15)

    /*
        useMemo 接收两个参数
        参数一：是一个函数，返回的内容就是我们需要缓存的内容
        参数二：是一个依赖参数
        useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。
    */
    const info = useMemo(() => {
        // useMemo 缓存的是计算后得到的值
        return {
            name, age
        }
    }, [name, age])

    return (
        <div>
            <h1>App - {count}</h1>

            <button onClick={() => {
                setCount(count + 1)
            }}>点击增加</button>
            <hr />

            <Child info={info} />
        </div>
    )
}
